<template>
    <xh-pages>
    <view class="page">
        <!-- #ifdef H5 -->
        <image :src="posterData" class="page" mode="scaleToFill" v-if="posterData" />
        <!-- #endif -->
        <canvas type="2d" class="page" canvas-id="poster" id="poster" :class="{ 'd-none': posterData }"></canvas>
    </view>
    </xh-pages>
</template>
<script lang="ts" setup>
import { useSite } from '@/stores/site';
import { useUserStore } from '@/stores/user';
import { toast } from '@/utils/helpers';
import { baseUrl } from '@/utils/request';

const siteInfo = storeToRefs(useSite()).siteInfo;
const userinfo = storeToRefs(useUserStore()).userInfo
const avatar = computed(()=> userinfo.value.avatar)

let CanvasContext: any = null;
let canvas: any = null;
const dealer = ref({
    qrcode: ''
})
const posterData = ref('');
onReady(() => {
    // #ifdef H5
    CanvasContext = uni.createCanvasContext('poster');
    // #endif
})
onLoad((options: any) => {
    getDealer();
})
const getDealer = () => {
    uni.showLoading({
        title: '加载中',
        mask: true
    })
    uni.$u.http.get('Dealer/index').then((res: any) => {
        dealer.value = res.data;
        
        // 绘制海报
        CanvasContext && draw();
    })
}
const drawImage = async (url: string, x: number, y: number, w: number, h: number) => {
    // #ifdef H5
    CanvasContext.drawImage(url, x, y, w, h);
    step.value++;
    draw();
    // #endif
}
const step = ref(0);
const draw = () => {
    const sInfo = uni.getSystemInfoSync();
    const avatarPosition = 160
    switch (step.value) {
        case 0:            
            drawImage(`${baseUrl}image/poster.jpg`, 0, 0, sInfo.windowWidth, sInfo.windowHeight);
            break;
        case 1:
            drawImage(dealer.value.qrcode, sInfo.windowWidth / 2 - 50, sInfo.windowHeight - 200, 100, 100);
            CanvasContext.save();
            break;
        case 2:
            // #ifdef H5
            CanvasContext.beginPath(); // 开始创建一个路径
            CanvasContext.arc(
                15 + sInfo.windowWidth / 2 - 15,
                15 + sInfo.windowHeight - avatarPosition,
                15,
                0,
                Math.PI * 2,
                false
            ); // 画一个圆形裁剪区域
            CanvasContext.clip();            
            // 绘制头像图片
            drawImage(avatar.value, sInfo.windowWidth / 2 - 15, sInfo.windowHeight - avatarPosition, 30, 30);
            CanvasContext.restore();
            // 给头像加一个2px白边
            CanvasContext.strokeStyle = '#FFFFFF';
            CanvasContext.lineWidth = 2;
            CanvasContext.stroke();
            CanvasContext.save();
            CanvasContext.setFillStyle('#FFFFFF');
            CanvasContext.setFontSize(12);
            // 设置文字透明度
            CanvasContext.setGlobalAlpha(0.35);
            // #endif
            // #ifdef MP-WEIXIN
            CanvasContext.fillStyle = '#FFFFFF';
            CanvasContext.font = '12px sans-serif';
            CanvasContext.globalAlpha = 0.35;
            // #endif
            // 在右下角添加WEBCONFIG.value.web_name
            CanvasContext.fillText(
                siteInfo.value.web_name,
                sInfo.windowWidth - CanvasContext.measureText(siteInfo.value.web_name).width - 10,
                sInfo.windowHeight - 10
            );
            CanvasContext.restore();
            step.value++;
            draw();
            break;
        case 3:
            // #ifdef H5
            CanvasContext.draw(false, () => {
                uni.hideLoading();
                saveImage();
            });
            // #endif
            break;
    }
}
const saveImage = () => {
    uni.canvasToTempFilePath({
        canvasId: 'poster',
        success: (res) => {
            console.log('ok',res);
            posterData.value = res.tempFilePath;
        },
        fail: (err) => {
            console.log('错误',err);
            toast('保存二维码图片失败')
        }
    })
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: calc(100vh - var(--window-top));
    display: block;
}

.d-none {
    display: none;
}
</style>